import React, { Component } from 'react';
import {
    WhiteSpace,
    Flex,
    List,
    Button,
    Icon,
    Grid,
    Modal,
} from 'antd-mobile';
import { connect } from 'dva';
import GoodsCarousel from './goodsCarousel';
import MyScroll from '../../components/MyScroll/MyScroll';
import { routerRedux } from 'dva/router';
import StoreInfo from './StoreInfo';
//  import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
// import pathToRegexp from 'path-to-regexp';

import CartBar from './CartBar';
import GoodsMoreInfo from './GoodsMoreInfo';
import GoodsList from './GoodsList';
import ButtonGoodsInfo from './ButtonGoodsInfo';
import SpecAll from './SpecAll';
import EvaluateGoodsList from './EvaluateGoodsList';
import GoodsTitle from './GoodsTitle'

import { goods_detail } from './goodsDetail.less';


class Detail extends Component {
    constructor(props) {
        super(props);
        // this.state = {
        //     modal1: false,
        //     vsible: false,
        // };
       // this.alloyTouch=null;
        this.oldData = "";
    }



    componentDidMount() {
        if(Object.keys(this.props.goodsDetail.goodsDetailInfo).length==0){
            this.props.dispatch({ type: 'goodsDetail/goodsDetailEFF', obj: { specId: this.props.match.params.specId, pageNo:1 } });
        }

    }
    componentWillMount() {
        // console.log("触发 componentWillMount。。。。。。。。。。。。。。。。。。。。。");
        // console.log(this.props.match.params.specId, "this.props.match.params");
        this.oldData = this.props.match.params.specId;
        this.props.dispatch({type: "goodsDetail/clearSpecId"});
    }

    componentWillUnmount() {
        this.props.dispatch({type: "goodsDetail/emptyEFF", obj: {goodsId: this.props.goodsDetail.goodsDetailInfo.id}});
    }






    render() {
        const { goodsDetail, location, dispatch } = this.props;
        const { goodsDetailInfo, buyCount, couponList = [] } = goodsDetail;
     //   const { modal1, vsible } = this.state;
        const {
            id,specId="", callyList  = [], name = '', salenum=0, cityName = "",
            spec = {}, shopActivityList = [], commentnum = 0, evaluate,  goodsShow = 1,
            transfeeCharge = '', evaluateGoodsList=[], consultationNum=0,
            storeId, storeLabel = '', storeName="", evaluateNum, storeGoodsNum, storeTrendsNum, storeDescription, evaluateStore,
            recommendList=[], orderList=[],
            bottomGoodsInfo, isFav, cartCount,
            specName, speAll, image
        } = goodsDetailInfo;
        const { specGoodsPrice = 0, specGoodsSpec = {} } = spec;

        return (
            <Flex style={{
                height:"100%",
                position:'relative',
            }} direction="column"
            >

                <GoodsTitle specId={specId} id={id} alloyTouch={ this.alloyTouch } dispatch={dispatch} location={location}></GoodsTitle>
                <MyScroll
                    getAlloyTouch={ this.getAlloyTouch }
                    style={{background:"#fff"}}
                >
                    <div className={goods_detail}>


                        <GoodsMoreInfo goodsDetailInfo={goodsDetailInfo} />

                        {/* <ButtonGoodsInfo bottomGoodsInfo={bottomGoodsInfo}></ButtonGoodsInfo> */}

                        <div style={{ height:'1rem' }}></div>


                    </div>


                </MyScroll>

                <CartBar goodsDetailInfo={goodsDetailInfo} showT={true} goodsId={id} spec={spec} storeId={storeId} dispatch={dispatch} cartCount={cartCount} isFav={isFav}></CartBar>
            </Flex>

        );
    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(Detail);
